<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>问答-KuangStudy</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <style>
        .nav-underline .nav-link {
            padding-top: .75rem;
            padding-bottom: .75rem;
            font-size: .875rem;
            color: #6c757d;
        }
    </style>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<body style="background: #f2f2f2;">

<!-- 导航栏 -->
<div th:replace="~{common/header::header(activeUrl='question')}"></div>

<main role="main" class="container mt-3 p-3 bg-white rounded">
    <div class="row" id="app">
        <div class="col-md-12 blog-main">

            <div class="blog-post">
                <h2 class="blog-post-title" v-text="question.title">你好我很可爱</h2>
                <p class="blog-post-meta">
                    <span >{{question.gmtCreate | msgFormat}}</span>
                    by
                    <a href="#" v-text="question.authorName">demo01</a>
                    <span>
                        <svg class="bi bi-eye-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
<path fill-rule="evenodd" d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
</svg>
1
                    </span>
                    <!-- 自己写的文章可以编辑和删除 -->
<!--                    <a-->
<!--                       class="float-right" style="color: red"-->
<!--                        onclick="if(!confirm('你确认要删除吗？')) return false;">-->
<!--                        <svg class="bi bi-x-square" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">-->
<!--                            <path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>-->
<!--                            <path fill-rule="evenodd" d="M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z"/>-->
<!--                            <path fill-rule="evenodd" d="M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z"/>-->
<!--                        </svg>-->
<!--                        删除-->
<!--                    </a>-->
<!--                    <a class="float-right mr-3">-->
<!--                       <svg class="bi bi-pencil-square" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">-->
<!--                            <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>-->
<!--                            <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>-->
<!--                        </svg>-->
<!--                        编辑-->
<!--                    </a>-->
                </p>
            </div>

            <hr style="margin-top: 18px">
            <!--文章主体内容-->
	        <div id="doc-content">
		        <div th:utext="${question.getContent()}">

		        </div>
	        </div>

        </div>

        <div class="col-md-12 blog-main" style="margin-top: 20px">
            <hr>
        </div>

        <div class="col-md-12 blog-main" style="margin-top: 20px">

                <div class="form-group">
                    <textarea required v-model="content" name="content" class="form-control" rows="3"></textarea>
                </div>
<!--                <button @click="subComment" class="btn btn-primary float-right">提交评论</button>-->
	        <button @click.prevent="tijiao()" class="btn btn-primary float-right">提交评论</button>
        </div>

        <div v-if="comment.length > 0"  class="col-md-12 blog-main" style="margin-top: 20px">
            <div class="my-3 p-3 bg-white rounded shadow-sm">
                <h6 class="border-bottom border-gray pb-2 mb-0">评论列表</h6>

                <div v-for="(list,k) in comment" :key="k" class="media text-muted pt-3">
                    <img :src="list.userAvatar" style="border-radius: 5px;margin-right: 5px " width="32" height="32">
                    <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
                        <strong class="d-block text-gray-dark" v-text="list.userName" ></strong>
                        <span v-text="list.content"></span>
                        <span   class="badge badge-light float-right"> {{list.gmtCreate | msgFormat}}</span>
                    </p>
                </div>
            </div>
        </div>
        <div v-else  class="col-md-12 blog-main" style="margin-top: 20px">
            <div class="my-3 p-3 bg-white rounded shadow-sm">
                <h6 class="pb-2 mb-0 text-center">emmm... 这里暂时还没有评论....</h6>
            </div>
        </div>

    </div>


</main>

<div th:replace="~{common/footer::footer}"></div>

<a class="to-top">返回顶部</a>
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/toTop.js}"></script>

<link rel="stylesheet" th:href="@{/editormd/css/editormd.preview.css}" />
<script th:src="@{/editormd/lib/marked.min.js}"></script>
<script th:src="@{/editormd/lib/prettify.min.js}"></script>
<script th:src="@{/editormd/lib/raphael.min.js}"></script>
<script th:src="@{/editormd/lib/underscore.min.js}"></script>
<script th:src="@{/editormd/lib/sequence-diagram.min.js}"></script>
<script th:src="@{/editormd/lib/flowchart.min.js}"></script>
<script th:src="@{/editormd/lib/jquery.flowchart.min.js}"></script>
<script th:src="@{/editormd/editormd.js}"></script>

<script th:inline="javascript" type="text/javascript">
    Vue.filter('msgFormat', function(msg) {
        // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
        return moment(msg).format('YYYY-MM-DD');
    })

    const vm = new Vue({
	    el: "#app",
	    data: {
            question: [[${question}]],
		    comment: {},
            content: ""
 	    },
	    mounted(){
			axios({
				url: "/comment/info/2/"+this.question.qid,
				method: "POST"
			}).then((resp)=>{
				console.log(resp)
			    this.comment = resp.data;
			})
	    },
	    methods: {
	        tijiao(){
				const comt = this.content
		        if(!comt){
		            alert("请请完善信息")
			        return
		        }
	            const json = {'topic_category': '2','context': comt,'topic_id': this.question.qid};
				axios({
					url: "/comment/write",
					method: "POST",
					data: json
				}).then((resp)=>{
						const code=  resp.data.code;
						if(code == 20000){
                            this.openVn('成功')
							this.content = "";
						}else {
                            this.openVn('失败')
						}
                    axios({
                        url: "/comment/info/2/"+this.question.qid,
                        method: "POST"
                    }).then((resp)=>{
                        console.log(resp)
                        this.comment = resp.data;
                    })
				})


            },
            openVn(value) {
                const h = this.$createElement;
                this.$message({
                    message: h('p', null, [
                        h('span', null, '发布'),
                        h('i', { style: 'color: teal' }, value)
                    ])
                });
            }
	    }
    })
</script>

</body>
</html>
